<template>
	<!-- 登录 -->
	<view class="content-box">
		<view class="head_name">
			<view class="head-logo">
				<image src="/static/logo.png" mode="aspectFit"></image>
			</view>
		</view>
		
		<view class="accunt_password">
			<view class="passwordeye" style="margin-bottom: 48rpx;">
				<up-input class="input" fontSize="24rpx"    prefixIcon="account-fill"  prefixIconStyle="font-size: 24px;color: #00AC79"   :placeholderStyle="place" :customStyle="btnGetCode"
					color="#333" shape="circle" v-model="loginInfo.accunt" clearable placeholder="请输入您的账号"></up-input>

			</view>
			<view class="passwordeye" style="margin-bottom: 24rpx;">
				<up-input class="input" fontSize="24rpx" prefixIcon="lock-fill"  prefixIconStyle="font-size: 24px;color: #00AC79" :placeholderStyle="place" :customStyle="btnGetCode"
					color="#333" shape="circle" type="password" v-model="loginInfo.password"
					placeholder="请输入您的密码"></up-input>
			</view>
		</view>
		<view class="btnbox">
			<view class="remember">
				<up-checkbox-group v-model="checked"  @change="checkboxChange">
					<up-checkbox  activeColor="#00AC79" shape="circle"  labelColor="#00AC79" label="记住密码" name="记住密码" size="14" labelSize="24rpx"></up-checkbox>
				</up-checkbox-group>
			</view>


		</view>
		<view class="read">
			<up-checkbox-group  v-model="radiovalue1" @change="groupChange">
				<up-checkbox  activeColor="#00AC79" shape="circle"  size="15"  label="" ></up-checkbox>
			</up-checkbox-group>
			<view class="isOk">我已阅读并同意</view>
			<view class="xieyi"><span class="xieyi_item" @click="handleAgreementClick({id:'522610561943343105',title:'隐私协议'})">《隐私协议》</span>、<span class="xieyi_item" @click="handleAgreementClick({id:'522610211966423041',title:'用户服务协议'})">《用户协议》</span></view>
		</view>

		<button @click="login" style="margin-top: 50rpx;background-color:#00AC79 !important;border-radius: 80rpx;">
			登录
		</button>

		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script setup>
	import { useWebsocket } from "@/stores/websocket.js";
	import {
		reactive,
		ref,
		getCurrentInstance,

	} from 'vue';
	import {
		userInfoStore
	} from '/stores/index.js'
	import {
		onShow
	} from "@dcloudio/uni-app";
	let {
		proxy
	} = getCurrentInstance();
	const loginInfo = reactive({
		accunt: '',
		password: ''
	})
	const btnGetCode = reactive({
		// border: '1rpx solid #3D5788 !important',
		padding: '22rpx 0 22rpx 48rpx !important'
	})
	const place = reactive({
		color: '#707070 !important',
		fonSize: '100rpx !important',

	})
	let radiovalue1 = reactive([''])
	let checked = ref([])
	const store = userInfoStore()
	const loginAgreementList = store.loginAgreementList.filter(i => i.isShow === 1);
	const handleAgreementClick = (item) => {
		uni.navigateTo({
			url: '/pagesA/agreement/index?id=' + item.id + '&title=' + item.title
		})
	}
	const groupChange = (n) => {
		
	}

	const login = () => {
		if (radiovalue1.length===0) {
			proxy.$refs.uToast.show({
				type: 'error',
				message: '请先阅读并勾选隐私协议和用户协议!'
			})
			return false;
		}
		if (uni.$u.test.isEmpty(loginInfo.accunt) || uni.$u.test.isEmpty(loginInfo.password)) {
			proxy.$refs.uToast.show({
				type: 'error',
				message: '请填写账号密码!'
			})
			return false;
		}
		// if (!uni.$u.test.mobile(loginInfo.accunt)) {
		// 	proxy.$refs.uToast.show({
		// 		type: 'error',
		// 		message: '请输入正确的手机号!'
		// 	})
		// 	return false;
		// }
		if (loginInfo.password.length < 6) {
			proxy.$refs.uToast.show({
				type: 'error',
				message: '请从新输入密码最少六位!'
			})
			return false;
		} else {

			let opts = {
				url: proxy.$api.login,
				method: "POST",
			};
			let data = {
				username: loginInfo.accunt,
				password: loginInfo.password,
				

			};
			proxy.$request.baseRequest(opts, data).then((res) => {
				if (res.data.code === 200) {
					uni.setStorageSync("token", res.data.token);
					store.setUserMobile(loginInfo.accunt)
					if (checked.length > 0) {
						uni.setStorageSync("userInfo", {
							userPhone: loginInfo.accunt,
							userPassword: loginInfo.password,
						});
					}
					
					getUserInfo()
				} else {
					proxy.$refs.uToast.show({
						type: 'error',
						message: res.data.msg
					})
				}
			}).catch((err) => {
				proxy.$refs.uToast.show({
					type: 'error',
					message: err
				})
			})



		}


	}

	//获取用户信息

	const getUserInfo = () => {
		let opts = {
			url: proxy.$api.getUserInfo,
			method: "GET",
		};
		
		proxy.$request.httpTokenRequest(opts).then((res) => {
			if (res.data.code === 200) {
				
				const result = res.data.data;
				
				if (result) {
					store.setUserInfo(result);
					useWebsocket().setName(loginInfo.accunt)
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
				
			} else {
				const message = res.data.msg ?? '哇哦，出错了，稍后重试'
				proxy.$refs.uToast.show({
					type: 'error',
					message
				})
			}
		}).catch((err) => {
			proxy.$refs.uToast.show({
				type: 'error',
				message: err
			})
		})
	}

	// 记住密码
	function checkboxChange(e) {
		if (e.length > 0) {
			checked = e[0]
			uni.showToast({
				icon: "none",
				title: "记住密码",
			});
			uni.setStorageSync("isTrue", checked);
		} else {
			uni.removeStorageSync("userInfo");
			uni.setStorageSync("isTrue", []);
		}
	}



	onShow(() => {
		if (uni.getStorageSync("isTrue")) {
			checked = [uni.getStorageSync("isTrue")]
			if (uni.getStorageSync("isTrue").length > 0) {
				loginInfo.accunt = uni.getStorageSync("userInfo").userPhone
				loginInfo.password = uni.getStorageSync("userInfo").userPassword
			}
		}
	})
</script>

<style lang="scss">
	page {
		background: #F1F5F5;
	}

	.passwordeye {
		.u-input {
			background-color: #ffffff !important;
		}
	}
</style>
<style lang="scss" scoped>
	button {
		width: 610rpx;
		height: 88rpx;
		margin: 0 auto;
		margin-top: 82rpx;
		background-color: #3a84ef;
		color: #ffffff;
		line-height: 88rpx;
	}



	.content-box {
		padding: 180rpx 0rpx;
		box-sizing: border-box;

		.head_name {
			display: flex;
			justify-content: center;
			align-items: center;

			.head-logo {
				width: 520rpx;
				height: 270rpx;

				image {

					width: 100%;
					height: 100%;
				}
			}

		}

		.accunt_password {
			margin-top: 50rpx;
			padding-left: 64rpx;
			padding-right: 64rpx;
			box-sizing: border-box;

			.accunt {
				font-size: 32rpx;
				font-weight: bold;
				margin-top: 60rpx;
			}

			.passwordeye {
				
				display: inline-block;
				width: 610rpx;
				position: relative;

				::v-deep .input {

					.u-input__input {
						font-size: 24rpx !important;
						// border: 2rpx solid #0F55B7 !important;
					}
				}

				.clear {
					position: absolute;
					top: 0;
					right: 0;
					margin-top: 30rpx;
					margin-right: 40rpx;
					background-size: 60% 60%;
					z-index: 20;
				}

				.eyebox {
					position: absolute;
					width: 80rpx;
					height: 50rpx;
					top: 0;
					right: 0;
					margin-top: 30rpx;
					padding-left: 2rpx;
					background-size: 60% 60%;
					z-index: 20;

				}
			}

		}






		.read {
			padding-left: 80rpx;
			padding-right: 80rpx;
			display: flex;
			align-items: center;

			.isOk {
				font-size: 24rpx;
				color: #969696;
			}

			.xieyi {
				font-size: 26rpx;
				color: #00AC79;

				&_item {
					cursor: pointer;
				}
			}
		}

		.btnbox {
			margin-bottom: 32rpx;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			box-sizing: border-box;

			.remember {
				box-sizing: border-box;
				padding-left: 80rpx;
				padding-right: 80rpx;
			}

			.forgetPassword {
				box-sizing: border-box;
				padding-left: 80rpx;
				padding-right: 80rpx;
				text-align: right;
				font-size: 24rpx;
				color: #3D5788;

			}
		}




		.login-tip {
			text-align: center;
			width: 100%;
			font-size: 24rpx;
			line-height: 36rpx;
			color: #999999;
			left: 0;
			padding: 0 16rpx;
			margin-top: 32px;

			.tip {
				color: #0068E1;
				display: inline;
			}
		}

	}
</style>